<template>
  <m-window-frame
    title="设置存储路径"
    style="height: 100%"
    class="v-201-save-path"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="save-path-container">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="form"
        label-width="85px"
        label-suffix="："
        :hide-required-asterisk="true"
      >
        <el-form-item
          :label="$t('保存地址')"
          prop="path"
        >
          <el-row :gutter="12">
            <el-col :span="21">
              <el-input
                v-model="form.path"
                @change="handleInputChange"
              ></el-input>
            </el-col>
            <el-col :span="3">
              <el-button
                :icon="MoreFilled"
                @click="changePath"
              ></el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </m-window-frame>
</template>
<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { MoreFilled } from "@element-plus/icons-vue";
import { ref, watch, reactive } from "vue";
import { localFile } from "@/mdesign-lib/mdesign-app.umd.js";
import { SavePathFor201Params, CloseData } from "./index";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";

const form = reactive({
  path: ""
});

const rules = reactive<FormRules>({
  path: [{ required: true, message: "请输入保存地址", trigger: "blur" }]
});

const ruleFormRef = ref<FormInstance>();

const route = useRoute();
watch(
  () => route.fullPath,
  () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as SavePathFor201Params;
    form.path = query.dir;
  },
  { immediate: true }
);

const changePath = () => {
  localFile.chooseDir({ defaultPath: form.path }).then(({ filePaths }) => {
    const targetDir = filePaths[0];
    targetDir && (form.path = filePaths[0]);
  });
};

const handleSave = async () => {
  if (!ruleFormRef.value) return;
  const valid = await ruleFormRef.value.validate();
  if (!valid) return;
  handleclose({ success: true, dir: form.path });
};

function handleclose(data: CloseData) {
  ipcWindowUtil.closeWindow(data);
}
function handleCancel() {
  handleclose({ success: false, dir: "" });
}

const handleInputChange = (value: string) => {
  form.path = value;
};
</script>
<style lang="scss">
.v-201-save-path {
  .save-path-container {
    padding: 20px 30px;
    .el-form-item {
      height: 32px;
      .el-form-item__label {
        padding-right: 0;
        line-height: 32px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-input__wrapper {
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: none;
      }
      .el-select {
        width: 100%;
      }
      .el-button {
        border-color: rgba(0, 0, 0, 0.15);
        padding: 8px;
        border-radius: 0;
        &:hover {
          border-color: var(--md-primary-color);
        }
      }
    }

    .el-row {
      width: 100%;
      .el-col {
        height: 32px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
